<template>
  <div class="containAll">
    <!-- 头部 -->
    <loginHeader></loginHeader>
    <!-- 中间背景 -->
    <div class="loginMain">
      <div class="fontP textCenter">
        <strong class="purpose">共创能源服务新价值</strong>
        <br>
        <span class="welcome">欢迎来到综合能源线上商城</span>
      </div>
      <div class="loginInfo">
        <el-form class="login-form" size="medium" :model="form" :rules="rules" ref="form">
          <div class="userInfo">
            <div class="infoTitle">账号密码登录</div>
            <div :span="24" class="marginTop20">
              <el-form-item label="" prop="username">
                <el-input placeholder="请输入用户名" type="text" v-model="form.username" clearable></el-input>
              </el-form-item>
            </div>
            <div :span="24" class="marginTop20">
              <el-form-item label="" prop="password">
                <el-input type="password" v-model="form.password" placeholder="输入密码"></el-input>
              </el-form-item>
            </div>
            <div :span="24" class="marginTop20">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="" prop="checked">
                    <el-checkbox v-model="form.checked">记住密码</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="textRight forgetPass" @click.native="toForgetPass">忘记密码</el-col>
              </el-row>
            </div>
            <div :span="24">
              <el-form-item label="">
                <el-button class="width100" type="primary" @click="submitForm('form')">登陆</el-button>
              </el-form-item>
            </div>
            <div :span="24" class="marginTop20 forgetPass" @click="toRegister">免费注册</div>
            <div :span="24" class="marginTop20 forgetPass">
              其他方式登陆:&nbsp;&nbsp;
              <span class="iconfont iconweixin fontSize18"></span>
              &nbsp;&nbsp;
              <span class="iconfont iconshouji fontSize18"></span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 底部 -->
    <footers></footers>
  </div>
</template>
<script type="text/javascript" layout="full" meta="{auth:true}">
import { mapActions } from "vuex";
import { SET_USER_INFO } from "src/store/actions/type";
import { homePage } from "src/common/setting";
import Footers from "../../../layout/default/components/footer/footer";
import LoginHeader from "../../../layout/default/components/header/loginHead";
export default {
  name: "UserLogin",
  data() {
    return {
      form: {
        username: "",
        password: "",
        checked: false
      },
      rules: {
        username: [
          { required: true, message: "请输入账户名！", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入账户密码！", trigger: "blur" }
        ]
      },
      submitLoad: false
    };
  },
  methods: {
    ...mapActions({
      setUserInfo: SET_USER_INFO
    }),
    submitForm(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          console.log(this.form.username);
          var dataObj = {
            name: this.form.username,
            password: this.form.password
          };
          this.loginApi(dataObj);
        } else {
          return false;
        }
      });
    },
    async loginApi(dataObj) {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.login(dataObj);
        if (data.code == 0) {
          sessionStorage.setItem('token',data.data)
          const h = this.$createElement;
          this.$notify({
            title: "消息提示",
            message: h("i", { style: "color: #67C23A" }, data.data)
          });
          setUserInfo(this.form.username);
          setTimeout(() => {
            this.$router.push({ name: "Home" });
          }, 3000);
        } else {
          const h = this.$createElement;
          this.$notify({
            title: "消息提示",
            message: h("i", { style: "color: #ff0000" }, data.data)
          });
        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: "消息提示",
          message: h("i", { style: "color: #ff0000" }, data)
        });
      }
    },
    //点击跳转忘记密码
    toForgetPass() {
      this.$router.push({ name: "ForgetPass" });
    },
    //点击跳转注册
    toRegister() {
      this.$router.push({ name: "Register" });
    }
  },
  components: {
    LoginHeader,
    Footers
  }
};
</script>
<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.fontSize18 {
  font-size: 18px;
}
.forgetPass {
  padding-left: 10px;
  line-height: 19px;
  font-size: 14px;
  cursor: pointer;
}
.textRight {
  text-align: right;
}
.marginTop20 {
  margin-top: 20px;
}
.loginInfo {
  width: 380px;
  height: 410px;
  position: absolute;
  // left: 1179px;
  // top: 213px;
  right: 10%;
  top: 28%;
  background: #ffffff;
  .userInfo {
    position: relative;
    padding: 0px 30px;
    .infoTitle {
      // height:19px;
      font-size: 20px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 60px;
      border-bottom: 1px solid #000000;
    }
  }
}
.fontP {
  position: absolute;
  left: 212px;
  top: 261px;
  .purpose {
    width: 476px;
    height: 53px;
    font-size: 53px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 66px;
  }
  .welcome {
    width: 397px;
    height: 31px;
    font-size: 33px;
    font-family: MicrosoftYaHeiLight;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 66px;
  }
}
.loginMain {
  width: 100%;
  height: 745px;
  background: url("../../../assets/images/loginRegBg.png");
}
.colorWhite {
  color: #fff;
  border: 0;
}
.colorWhite:hover {
  border: 0;
  cursor: pointer;
}
.default-layout-header {
  padding: 0;

  .header-bar {
    padding: 0 20px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #102a3b;
    .inlineBlock {
      display: inline-block;
    }
    .marginR56 {
      margin-right: 56px;
    }
    .head-text {
      align-items: center;
    }
    .head-right {
      position: absolute;
      top: 0;
      right: 15px;

      .head-user {
        align-items: center;
      }
      .el-dropdown-link {
        color: rgb(197, 196, 196);
      }
      .padding10 {
        padding: 0 10px;
        font-size: 13px;
      }
      .loginFont {
        color: rgb(197, 196, 196);
      }
      .user-text {
        color: #fff;

        &.logout {
          margin-left: 20px;
        }
      }
    }

    .head-avatar {
      margin-right: 10px;
      width: 36px;
      height: 36px;
      border-radius: 18px;
    }
  }
}
</style>
